import { StorageService } from "./../../providers/StorageService";
import { PIC_URL } from "./../../providers/Config";
import { BasePage } from "./../basePage";
import { Component, Injector, AfterViewInit } from "@angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";
import { StyleService } from "./../../providers/StyleService";
import { timeout } from "rxjs/operator/timeout";

/**
 * Generated class for the SearchPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: "page-search",
  templateUrl: "search.html",
  providers: [StyleService]
})
export class SearchPage extends BasePage {
  private searchResult: any;
  private myInput: string = "";
  private showInput: string;

  /*用来存储 返回的结果 以及要呈现到页面上的内容*/
  private nails: any;
  private nailsCount: any;
  private shopsCount: any;
  private shops: any;
  private artists: any;
  private artistsCount: any;
  private rootPicUrl: String;

  /*用于保存用户的信息*/
  private userinfo: any;
  private user_id: any;

  /*表示是否已经加载了最多的数据*/
  private isNailsMore: Boolean = false;
  private isArtistsMore: Boolean = false;
  private isShopsMore: Boolean = false;

  /*用来保存搜索的结果是否为 空*/
  private isResultNull: Boolean = false;

  /*用来保存是否显示搜索结果列表*/
  private isHasSearch: Boolean = false;

  /*用来 保存热门搜索的 条款*/
  private searchHint: any;

  /*用来保存搜索的历史记录*/
  private historyList: any;

  private lostNet: Boolean = false;
  private isBeforeSearch: Boolean;

  constructor(
    injector: Injector,
    // public navCtrl: NavController,
    public styleService: StyleService,
    public stc: StorageService // public navParams: NavParams,
  ) {
    super(injector);
    this.rootPicUrl = PIC_URL;
  }
  red: string;
  // ngAfterViewInit() {
    
  //   // tex[0] as HTMLDivElement
  //   // let text2=' '
  //   //    text2 = tex.innerHTML;
  //   //  let text = text2.split('美甲');
  //   //  tex.innerHTML = text.join('<span style="color:red">' + tex + "</span>");
  //   //  console.log(text.join('<span style="color:red">' + tex + "</span>"))
  //   // setTimeout(() => {
  //   //   console.log(tex[0]!.innerHTML);
  //   // }, 10000);
  //   var tex = document.getElementsByClassName("mtto");
  //     console.log(tex)
  //   console.log(this.red)
  //   console.log(this.isHasSearch)
  //   if (this.isHasSearch) {
      
  //     // setTimeout(() => {
  //     for (let i = 0; i < tex.length; i++) {
  //       let text2 = " ";
  //       text2 = tex[i].innerHTML;
  //       let text = text2.split(this.red);
  //       tex[i].innerHTML = text.join(
  //         '<span style="color:red">' + this.red + "</span>"
  //       );
  //     } 
  //   // }, 100);
  //   }
  // }
  ionViewDidLoad() {
    console.log("ionViewDidLoad SearchPage");

    /*查询用户的登录信息*/
    this.userinfo = this.stc.read("userinfo");

    if (this.userinfo == null) this.user_id = null;
    else this.user_id = this.userinfo.user_id;

    this.isBeforeSearch = true;

    this.searchHint = [
      "指上芭蕾",
      "格力舍",
      "嘉年华",
      "克拉美甲",
      "完美甲人",
      "指尖诱惑"
    ];
    this.historyList = this.stc.read("searchHistory") || [];
  }

  /*搜索部分的函数*/
  getFocus($event) {
    console.log("得到了焦点");
    this.isHasSearch = false;
    console.log(this.myInput.trim() == "");

    if (this.myInput.trim() == "") {
      this.isBeforeSearch = true;
    } else {
      this.isBeforeSearch = false;
    }
  }
  loseFocus() {}

  /*获取键盘enter事件*/
  async getTheKeyDown($event, mtto) {
    /*如果输入了搜索词 就显示搜索列表*/
    if (this.myInput.trim() == "") this.isBeforeSearch = true;
    else this.isBeforeSearch = false;

    if ($event.keyCode == "13") {
      console.log("搜索");
      this.searchAPI(mtto);
      this.isBeforeSearch = false;
    }
    console.log(mtto);
  }

  /*点击删除按钮后  删除本地缓存中的 searchHistory*/
  delHistory() {
    this.historyList = [];
    this.stc.write("searchHistory", this.historyList);
  }

  dissmiss() {
    // console.log('回退按钮');
    this.navCtrl.pop();
  }

  /*向后台的 搜索api 发送请求的函数*/
  async searchAPI(mtto: HTMLDivElement) {
    this.lostNet = false;
    this.red = this.myInput;
    console.log(this.myInput);

    if (this.myInput != "") this.showInput = this.myInput;
    this.isResultNull = false;
    let param = {
      search_key: this.myInput,
      search_type: 1
    };
    console.dir(this.styleService);

    let res = await this.styleService.searchAPI(param);
    if (res["data"] == null) {
      console.log("网络错误");
      this.lostNet = true;
      return;
    }

    this.searchResult = res["data"];
    console.log(this.searchResult);

    this.nails = this.searchResult.nails;
    this.nailsCount = this.searchResult.nails.length;
    this.isNailsMore = this.searchResult.nails.length > 4 ? false : true;
    this.shops = this.searchResult.shops;
    this.shopsCount = this.searchResult.shops.length;
    this.isShopsMore = this.searchResult.shops.length > 4 ? false : true;
    this.artists = this.searchResult.artists;
    this.artistsCount = this.searchResult.artists.length;
    this.isArtistsMore = this.searchResult.artists.length > 4 ? false : true;

    if (
      this.nails.length == 0 &&
      this.shops.length == 0 &&
      this.artists.length == 0
    ) {
      /*如果搜索结果为空 为用户默认推荐一部分内容*/
      this.myInput = "";
      this.searchAPI(mtto);
      this.isResultNull = true;
    } else {
      /*如果搜索结果不为空 并且 搜素的关键字不为空
        将搜索历史保存到 本地缓存中*/
      console.log(this.myInput);
      if (this.myInput != "") {
        this.historyList.push(this.myInput);
        this.stc.write("searchHistory", this.historyList);
      }
    }
    this.myInput = "";
    var a = document.getElementById("search-input");
    a.blur();
    this.isHasSearch = true;
    var tex = document.getElementsByClassName("mtto");
    console.log(this.red);
     console.log(res)
      if (this.isHasSearch && !this.lostNet) {
        setTimeout(() => {
        for (let i = 0; i < tex.length; i++) {
          let text2 = " ";
          text2 = tex[i].innerHTML;
          let text = text2.split(this.red);
          tex[i].innerHTML = text.join(
            '<span class="red">' + this.red + "</span>"
          );
        } 
      }, 100);
      }
    
  }

  /*网络异常的时候 点击刷新 执行的函数*/
  togetSearchAgain(mtto) {
    this.searchAPI(mtto);
  }

  /*搜索推荐和搜索历史里面  用到的点击事件*/
  clickForSearch(item, mtto) {
    this.myInput = item;
    this.searchAPI(mtto);
  }

  /*显示搜索结果后  用户点击 相应的结果 跳转到对应的页面中*/
  skipTopage(index, param) {
    /*
      index = 1  表示跳转到  美图美款页面
      index = 2  表示跳转到  美甲师页面
      index = 3  表示跳转到  美甲店页面

    */
    var modal;

    console.log("点击了跳转");
    console.log(param);
    switch (index) {
      case 1:
        modal = this.modalCtrl.create("ImgInfoPage", param);
        modal.present();
        break;
      case 2:
        modal = this.modalCtrl.create("NailerDetailPage", param);
        modal.present();
        break;
      case 3:
        modal = this.modalCtrl.create("NaiShopDetailPage", param);
        modal.present();
        break;
      default:
        console.log("都没哟");
        break;
    }
  }

  /*点击加载更多执行的事件*/
  getMore(index) {
    switch (index) {
      case 1:
        this.isNailsMore = true;
        break;
      case 2:
        this.isArtistsMore = true;
        break;
      case 3:
        this.isShopsMore = true;
        break;
      default:
        break;
    }
  }
}
